<template>

    <view id="wmswiper" class="wormjan-swiper" :style="container_style">
        <!-- <view id="index" class="item" v-for="(item, index) in lists" :key="index" :style="style"
            @click="itemClick(item)">
            {{ item.title }}
        </view> -->
        <swiper class="swiper" :disable-touch="true" circular :interval="duration" :autoplay="autoplay"
            :current="current">
            <swiper-item v-for="(item, index) in lists" :key="index">
                <view class="item">
                    <!-- {{ item.title }} -->
                    <texza :text="item.title" ref="texts" :start="current == index" @end="end(item, index)"></texza>
                </view>
            </swiper-item>
        </swiper>


    </view>

</template>
<script>
import texza from './ces.vue'
export default {
    name: "wormjan-swiper",
    components: {
        texza
    },
    props: {
        //数据列表
        lists: {
            type: Array,
            default() {
                return []
            }
        },
        //容器高度，行高
        height: {
            type: String,
            default() {
                return "36";
            }
        },
        //容器背景色
        backColor: {
            type: String,
            default() {
                return '#fff';
            }
        },
        //字色
        color: {
            type: String,
            default() {
                return "#555";
            }
        },
        //停顿时长，即多长时间后开始滚动,以及滚到头后多久换下一个公告
        intval_1: {
            type: String,
            default() {
                return "1000";
            }
        },
        //滚动速度,越大越慢
        intval_2: {
            type: String,
            default() {
                return "20";
            }
        },
    },
    data() {
        return {
            style: '',
            objIndex: 0,
            objCount: 0,
            containerWidth: 0,		//容器宽度
            left: 0,
            top: 0,
            leftInterval: null,
            colInterval: null,
            container_style: '',
            autoplay: false,
            duration: 20000,
            current: 0,
            animationTimeout: null,  // 用于保存定时器引用
        }
    },
    mounted() {
        this.container_style = "height:" + this.height + "px;line-height:" + this.height + "px;background:" + this.backColor + ';color:' + this.color;
        // this.execswip();
        console.log(this.$refs.texts[0].startAnimation, '我是全部的文字')
        // 先设置第一个开始
        this.$nextTick(() => {
            this.setLunbo()
        })
    }, // 组件销毁前清除定时器
    beforeDestroy() {
        if (this.animationTimeout) {
            clearTimeout(this.animationTimeout);
            this.animationTimeout = null;
        }
    },
    methods: {
        setLunbo() {
            this.$refs.texts[this.current].startAnimation()
        },
        // 结束了移动完毕的时候
        end(items, index) {
            // 使用模运算确保循环切换
            const listLength = this.lists.length;

            this.current = (index + 1) % listLength;

            console.log(this.current, '我是current')

            // 清除已有定时器避免重复
            if (this.animationTimeout) clearTimeout(this.animationTimeout);

            this.animationTimeout = setTimeout(() => {
                // 防御性编程：检查元素有效性
                if (
                    !this.$refs.texts ||
                    this.current >= this.$refs.texts.length ||
                    !this.$refs.texts[this.current]
                ) {
                    console.warn('Invalid element reference at index:', this.current);
                    return;
                }

                // 安全调用方法
                const targetElement = this.$refs.texts[this.current];
                if (typeof targetElement.startAnimation === 'function') {
                    targetElement.startAnimation();
                }
            }, 2000);
        }
    }
}
</script>
<style lang="scss" scoped>
.wormjan-swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swiper {
    width: 100%;
    height: 100%;
}

.item {
    width: 100%;
    white-space: nowrap;
    position: relative;
    overflow-x: visible;
    // width: fit-content;
    padding: 0 5px;
    background-color: #000;
}
</style>